import Qt 4.7

Rectangle {
    id: container

    width: 525; height: 314
    color: "transparent"

    signal callUpdateCategories

    function initialize() {
        listaButton.turnOff();
        graficoButton.turnOff();
        listaButton.toggle();
    }
    function updateCategories(m_model) {
        listaModeView.updateModel(m_model);
        updateChart(m_model);
    }
    /* Create the chart dinamically whenever is needed
     *
     **/
    function updateChart(m_model) {
        var chart_item;
        if (chart_item = chartRectangle.childAt(0,0))
            chart_item.destroy();

        var new_component = Qt.createComponent("Chart.qml");
        var new_obj = new_component.createObject(chartRectangle);

        if (new_obj == null)
            console.log("QML:CategoryView - Error when creating chart");
        else {
            new_obj.anchors.fill = chartRectangle;
            new_obj.typeChart = 1;
            new_obj.categoryList = m_model;
            colorByCategoryList.model = m_model;
        }
    }

    Text {
        id: addFlowLabel

        x: 38; y: 16
        text: "Categorias"; color: "#00adef"
        //text: daoManager.text(); color: "black"
        font { pointSize: 12; weight: Font.DemiBold; family: "Series 60 Sans" }
    }
    Button {
        id: listaButton

        x: 315; y: 0; width: 68; height: 45
        color: "#C2EBFB"

        pressedColor: "#C2EBFB"; toggledColor: "#C2EBFB"; defaultColor: "transparent"
        isToggled: true; toggleEnable: true

        onClicked: graficoButton.toggle()

        Image { source: "../resources/pixmaps/Categorias/Lista.png" }
    }
    Button {
        id: graficoButton

        x: 384; y: 0; width: 68; height: 45
        color: "transparent"
        pressedColor: "#C2EBFB"; toggledColor: "#C2EBFB"; defaultColor: "transparent"
        toggleEnable: true

        onClicked: {
            listaButton.toggle();
        }
        Image { source: "../resources/pixmaps/Categorias/Grafico.png" }
    }
    CategoryList {
        id: listaModeView
        x: 0 ; y: 82;
        visible: listaButton.isToggled
        onCallUpdateCategories: {
            container.callUpdateCategories()
        }
    }
    Rectangle {
        id: chartRectangle

        x: 20; y: 82; height: 280; width: 320
        visible: graficoButton.isToggled
        color:  "transparent"
    }
    Rectangle {
        x: 300; y: 70;

        color: "transparent"
        height: 400; width: 200;
        visible: graficoButton.isToggled

        ListView {
            id: colorByCategoryList

            anchors.fill: parent
            orientation: ListView.Vertical
            delegate: delegate
            clip: true
            onVisibleChanged: {
                console.debug("QML:CategoryView - ListView visible is " + visible);
            }
        }
        Component {
            id: delegate

            Rectangle {
                id: wrapper

                color: "transparent"
                height: 50; width: 130;

                Rectangle {
                    id: colorRectangle

                    x: 10
                    height: 10; width: 10
                    border { width: 1; color: "black"}
                    color: model.modelData.color
                }
                Text {
                    id: name

                    x: 24
                    text: model.modelData.name +  ' (' + model.modelData.percentage +'%) '
                }

            }
        }
    }
}
